<template>
  <p class="add-title">保存用户信息</p>
  <div>
    <div class="add-field-div">
      <label class="add-field-div-label">用户登录名：</label>
      <el-input v-model="userInfo.userId" style="width: 240px" placeholder="Please input"/>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">密码：</label>
      <el-input v-model="userInfo.password" style="width: 240px" placeholder="Please input"/>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">确认密码：</label>
      <el-input v-model="verifyPassword" style="width: 240px" placeholder="Please input"/>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">真实姓名：</label>
      <el-input v-model="userInfo.userName" style="width: 240px" placeholder="Please input"/>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">所在部门：</label>
      <el-select v-model="userInfo.departId" placeholder="Select" style="width: 240px">
        <el-option
            v-for="item in departList"
            :key="item.departId"
            :label="item.departName"
            :value="item.departId"
        />
      </el-select>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">性别：</label>
      <el-radio-group v-model="userInfo.gender">
        <el-radio value="1" size="large">男</el-radio>
        <el-radio value="2" size="large">女</el-radio>
      </el-radio-group>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">头像：</label>
      <el-upload
          ref="elUpload"
          class="avatar-uploader"
          action="http://localhost:8080/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" width="50px" height="50px" :src="imageUrl" class="avatar" alt="无法显示">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">角色：</label>
      <el-select v-model="userInfo.roleId" placeholder="Select" style="width: 240px">
        <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
        />
      </el-select>
    </div>
    <div class="add-field-div">
      <label class="add-field-div-label">状态：</label>
      <el-select v-model="userInfo.userState" placeholder="Select" style="width: 240px">
        <el-option
            v-for="item in userStateList"
            :key="item.userStateId"
            :label="item.userStateName"
            :value="item.userStateId"
        />
      </el-select>
    </div>
    <div class="add-field-div">
      <el-button type="success" @click="addUserInfo">保存</el-button>
      <el-button type="primary" @click="returnUserInfo">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from "vue";
import api from "@/axios.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import type {ElUpload} from "element-plus";

interface DepartInfo {
  departId?: Number,
  departName?: String
}

interface UserState {
  userStateId?: Number,
  userStateName?: String
}

interface RoleInfo {
  roleId?: Number,
  roleName?: String
}

interface UserInfo {
  userId?: String,
  userName?: String,
  password?: String,
  departId?: Number,
  gender?: Number,
  roleId?: Number,
  userState?: Number,
  headImg?: String
}

onMounted(() => {
  selDepartInfo();
  selRoleInfo();
  selUserState();
})

// 添加的用户对象
let userInfo = ref<UserInfo>({});
let verifyPassword = ref('');

const addUserInfo = () => {
  api({
    url: "/addUserInfo", method: "post", params: userInfo.value
  }).then(resp => {
    if (resp.data.code == 1) router.push('/index/userInfo');
    ElMessage(resp.data.message);
  });
};

const returnUserInfo = () => {
  router.push('/index/userInfo');
};

// 部门
const departList = ref<DepartInfo[]>([]);
const selDepartInfo = () => {
  api({
    url: "/departInfo", method: "get"
  }).then(resp => {
    departList.value = resp.data;
  });
};

// 角色
const roleList = ref<RoleInfo[]>([]);
const selRoleInfo = () => {
  api({
    url: "/selRoleInfo", method: "get"
  }).then(resp => {
    roleList.value = resp.data;
  });
};


// 状态
const userStateList = ref<UserState[]>([]);
const selUserState = () => {
  api({
    url: "/selUserState", method: "get"
  }).then(resp => {
    userStateList.value = resp.data;
  });
};


// 上传
let imageUrl = ref('');

const elUpload = ref<typeof ElUpload>();

const handleAvatarSuccess = (resp) => {
  userInfo.value.headImg = resp;
  imageUrl.value = `http://localhost:8080/download?name=${resp}`
};

const beforeAvatarUpload = (file) => {
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isPNG) {
    elUpload.value?.$message.error('上传头像图片只能是 PNG 格式!');
  }
  if (!isLt2M) {
    elUpload.value?.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return true;
}


</script>

<style scoped>
.add-title {
  padding-left: 20px;
  font-weight: bold;
  font-size: 20px;
}

.add-field-div {
  padding: 5px;
}

.add-field-div-label {
  display: inline-block;
  width: 120px;
}

/*上传图片样式：*/
.avatar-uploader {
  display: inline;
}

.avatar-uploader .el-upload {
  border: dashed 2px #d8dde3 !important;
  border-radius: 4px !important;
  background: #fcfcfc;
}

.avatar-uploader .avatar-uploader-icon {
  background: #fcfcfc;
}

.avatar-uploader .el-icon-plus:before {
  content: "上传图片" !important;
  font-size: 16px;
  color: #000;
}

</style>